//导入 gulp 依赖
const gulp = require("gulp");

//导入 gulp-cssmin 依赖 直接执行就ok
const cssmin = require("gulp-cssmin") //这个本身就是一个函数

//导入 gulp-autoprefixer 依赖 加css样式前缀 需要一些参数 参数就是兼容得浏览器
const autoprefixer = require("gulp-autoprefixer")

//导入 gulp-babel 依赖 js Es6 转 Es5 对象 presets:["@babel/env"]  需要传递一个参数
const babel = require("gulp-babel")

//导入 gulp-htmlmin 依赖  压缩html文件  需要配置文件 对象里面放文件
const htmlmin = require("gulp-htmlmin")

//导入 gulp-uglify 依赖 压缩js文件  直接执行就ok
const uglify = require("gulp-uglify")

//导入 gulp-sass-china 依赖  sass  转  sss  直接执行就行了
const sass = require("gulp-sass-china")

// //导入 gulp-webserver 依赖  创建服务器
// const webserver = require("gulp-webserver")

//创建一个css的打包任务 压缩css
// gulp.task("css",()=>{
//     gulp.src("./project/css/**") //找到我要打包的文件
//         .pipe(cssmin()) //压缩 css 文件 
//         .pipe(autoprefixer()) //加css样式前缀 "last 2 version","safari 5","ie 8","ie 9","opera 12.1","ios 6","android 4" 我直接在package.json 里写的兼容了
//         //使用管道函数执行任务
//         .pipe(gulp.dest("./dist/css")) //参数是要做的事情
// })

function cssFn(){
    return gulp.src("./czn_project/css/**")
                .pipe(cssmin()) //压缩 css 文件 
                .pipe(autoprefixer()) //加css样式前缀
                .pipe(gulp.dest("./dist/css"))
}
exports.css = cssFn;

// //定义 css 监听
// function watchCssFn(){
//     return gulp.watch("./project/css/**",cssFn)
// }
// exports.watchCss = watchCssFn; 


//创建一个 js 打包任务 Es6 转 Es5 压缩
function jsFn(){
    return gulp.src("./czn_project/public/*.js")
                //使用ES6语法转ES5语法 
                .pipe(babel({  
                    presets:["@babel/env"]  //需要传递一个参数
                }))
                .pipe(uglify()) //js压缩
                .pipe(gulp.dest("./dist/public"))  //参数是要做的事情  如果当前 目录下没有这个文件夹的话 会自动创建
}
module.exports.js = jsFn;   //导出

// //定义 js 监听
// function watchJsFn(){
//     return gulp.watch("./czn_project/js/**",jsFn)
// }
// module.exports.watchJs = jsFn;

// //创建一个 html 的打包任务 压缩html

//第一种方法
function htmlFn(){
    return gulp.src("./czn_project/page/**")
                .pipe(htmlmin({    //需要配置文件
                    collapseWhitespace:true, //移除空行
                    removeEmptyAttributes:true  //移除空属性
                }))
                .pipe(gulp.dest("./dist/page"))
}
module.exports.html = htmlFn; //导出

function indexFn(){
    return gulp.src("./czn_project/index.html")
                .pipe(htmlmin({    //需要配置文件
                    collapseWhitespace:true, //移除空行
                    removeEmptyAttributes:true  //移除空属性
                }))
                .pipe(gulp.dest("./dist"))
}
module.exports.index = indexFn; //导出

// //第二种方法
// // gulp.task("html",()=>{
// //     gulp.src("./project/static/**")
// //         .pipe(htmlmin({    //需要配置文件
// //             collapseWhitespace:true, //移除空行
// //             removeEmptyAttributes:true  //移除空属性
// //         }))
// //         .pipe(gulp.dest("./dist/page"))
// // })

// // 定义 html 监听
// function watchHtmlFn(){
//     return gulp.watch("./czn_project/page/**", htmlFn)
// }
// module.exports.watchHtml = watchHtmlFn;

//创建一个 sass 打包任务  sass 转 css
function sassFn(){
    return gulp.src("./czn_project/sass/**")
            .pipe(sass())  //直接执行就行了
            .pipe(cssmin()) //压缩 css 文件 
            .pipe(autoprefixer()) //加css样式前缀
            .pipe(gulp.dest("./dist/css"))
}
exports.sass = sassFn;

// function allFn(){
//     return gulp.src("./czn_project/**/*")
//             .pipe(gulp.dest("./dist"))
// }
// exports.all = allFn;

// // //创建 gulp-web 服务器
// // function webserverFn(){
// //     gulp.src("./dist")
// //         .pipe(webserver({
// //             host:"localhost", //域名
// //             port:"3000", //指定访问地址
// //             livereload:true, //自动刷新网页
// //             open:"./page/index.html",
// //             //代理 处理跨域
// //             proxies:[{
// //                 // source属性用来表示，代理之后的地址
// //                 // 在前端的ajax内，直接请求：http://localhost:3000/abc
// //                 source:"/tar",
// //                 // target属性用来标志要代理的跨域地址
// //                 target:"https://wanandroid.com/wxarticle/chapters/json"
// //             }]
// //         }))
// // }
// // exports.webserver = webserverFn;

// //暴露批量执行指令后
// exports.htmlCssJsSass = gulp.series(htmlFn,cssFn,jsFn,sassFn)


// // //批量执行监听
// // function watchAllFn(){
// //     gulp.watch("./project/css/**",cssFn);//定义 css 监听
// //     gulp.watch("./project/static/**",jsFn)//定义 js 监听
// //     gulp.watch("./project/static/**", htmlFn)// 定义 html 监听
// //     gulp.watch("./project/static/**", sassFn)// 定义 sass 监听
// // }
// // exports.watchAll =  watchAllFn; 


// // //终极批量执行

// // exports.All = gulp.series(gulp.parallel(htmlFn,cssFn,jsFn,sassFn),gulp.parallel(watchAllFn,webserverFn))
// // //                  同步         异步                                     异步